<template>
    <el-form ref="ruleFormRef"  :model="ruleForm" label-width="auto" status-icon >
        <el-descriptions size="small" border :column="2" id="print" class="print">
            <el-descriptions-item width="20px" label="项目信息" :span="2">
                <el-descriptions border :column="2">
                    <el-descriptions-item label="项目名称　　　" :span="2"><div style="width:500px">{{ ruleForm.project.title }}</div></el-descriptions-item>
                    <el-descriptions-item label="项目地址　　　" :span="2" >{{ ruleForm.project.address }}</el-descriptions-item>
                    <el-descriptions-item label="合同总金额　　" >
                        <div class="w-f"><el-text>{{ ruleForm.project.price }}</el-text></div>
                    </el-descriptions-item>
                    <el-descriptions-item label="合同税率　　　" >
                        <div class="w-f"><el-text>{{ ruleForm.tax_rate }}%</el-text></div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item width="20px" label="销售方信息" :span="2">
                <el-descriptions border :column="2">
                    <el-descriptions-item label="单位名称　　　"><div class="w-f"><el-text>{{ ruleForm.name }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="地址　　　　　"><div class="w-f"><el-text>{{ ruleForm.address }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号　"><el-text>{{ ruleForm.tax_id }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="电话　　　　　"><el-text>{{ ruleForm.mobile }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="开户银行　　　"><el-text>{{ ruleForm.bank }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="开户行号　　　"><el-text>{{ ruleForm.bank_number }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="银行账号　　　"><el-text>{{ ruleForm.bank_account }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　　"><el-text>{{ ruleForm.email }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　　"><el-text>{{ ruleForm.postal_code }}</el-text></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item width="20px" label="购买方信息" :span="2">
                <el-descriptions class="b_" border :column="2">
                    <el-descriptions-item label="单位名称　　　"><div class="w-f"><el-text>{{ ruleForm.b_name }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="地址　　　　　"><div class="w-f"><el-text>{{ ruleForm.b_address }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号　"><el-text>{{ ruleForm.b_tax_id }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="电话　　　　　"><el-text>{{ ruleForm.b_mobile }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="开户银行　　　"><el-text>{{ ruleForm.b_bank }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="开户行号　　　"><el-text>{{ ruleForm.b_bank_number }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="银行账号　　　"><el-text>{{ ruleForm.b_bank_account }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　　"><el-text>{{ ruleForm.b_email }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　　"><el-text>{{ ruleForm.b_postal_code }}</el-text></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item width="20px" label="备注" :span="2">
                <el-descriptions class="b_" border :column="2">
                    <el-descriptions-item label="本次开票　　　">
                        <div class="w-f"><el-text>{{ ruleForm.price }}</el-text></div>
                    </el-descriptions-item>
                    <el-descriptions-item label="类型　　　　　">
                        <div class="w-f"><el-text>{{ ruleForm.type }}</el-text></div>
                    </el-descriptions-item>
                    <el-descriptions-item label="税率　　　　　" >
                        <div class="w-f"><el-text>{{ project.tax_rate }}%</el-text></div>
                    </el-descriptions-item>
                    <el-descriptions-item label="税金　　　　　">
                        <div class="w-f"><el-text>{{  ruleForm.tax_price}}</el-text></div>
                    </el-descriptions-item>
                    <el-descriptions-item label="累计开票金额　"><div class="w-f"><el-text>{{ ruleForm.invoice_amount }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="占比率　　　　"><div class="w-f"><el-text>{{ ruleForm.mix }}%</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="开票申请人　　"><div class="w-f"><el-text>{{ user.name }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="价税合计(大写)"><div class="w-f"><el-text>{{ ruleForm.china_price }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="备注　　　　　"><div class="w-f"><el-text>{{ ruleForm.remarks}}</el-text></div></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <div class="text-center mt30"><el-button @click="printElement('print')"> 打印 </el-button></div>
</template>
  
<script lang="ts" setup>
import { ref, watch } from 'vue'
import http from '../util/request';
import { FormInstance, } from 'element-plus';
import func from '../util/function';
import { PrinterService } from '../util/printer'
const printer = new PrinterService()

const ruleFormRef = ref<FormInstance>()
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

interface RuleForm {
    id:number
    price:number
    china_price:string
    tax_rate:number
    tax_price:number|string
    type:string
    
    name: string
    tax_id: string
    address: string
    mobile: string
    bank: string
    bank_number:number
    bank_account:number
    email:string
    postal_code:string

    b_name: string
    b_tax_id: string
    b_address: string
    b_mobile: string
    b_bank: string
    b_bank_number:number
    b_bank_account:number
    b_email:string
    b_postal_code:string

    invoice_amount: number
    invoice_type: string
    invoice_content:string
    mix:number
    user_id:number
    remarks:string

    is:boolean
    project:any
}

const ruleForm = ref<RuleForm>({
    id:0,
    price:0,
    china_price:'',
    tax_rate:0,
    tax_price:0,
    type:'',
    
    name: '/',
    tax_id: '/',
    address: '/',
    mobile: '/',
    bank: '/',
    bank_number:0,
    bank_account:0,
    email:'/',
    postal_code:'/',

    b_name: '/',
    b_tax_id: '/',
    b_address: '/',
    b_mobile: '/',
    b_bank: '/',
    b_bank_number:0,
    b_bank_account:0,
    b_email:'/',
    b_postal_code:'/',

    invoice_amount: 0,
    invoice_type: '/',
    invoice_content:'/',
    mix:0,
    user_id:0,
    remarks:'/',

    is:true,

    project:{}
})

const getData = () => {
    if(ruleForm.value.id == 0){
        return;
    }
    http.post('/projectInvoice/info',{id:ruleForm.value.id}).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.china_price = func.numberToChinese(ruleForm.value.price)
        }
    })
}

const printElement = (elementId:string) => {
    printer.printElement(elementId, { title: '开票申请' })
}

const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    getData()
},{ immediate: true })
</script>
<style scoped>
.form{margin:0px auto;height: calc(100vh - 25vh);overflow-y: scroll;}
.print{width: 210mm;size: A4;margin: 1cm;}
.w-f{width: 200px;}
.b_ .el-input{width: 180px;}
</style>
